<template>
    <div class="_list-item">
        <div v-handle class="_handleElement"></div>
        <span class="_closeItem" @click="close">&times;</span>
        <slot></slot>
    </div>
</template>

<script>
import { ElementMixin, HandleDirective } from "vue-slicksort";
export default {
    mixins: [ElementMixin],
    directives: {
        handle: HandleDirective
    },
    props: ["activeIndex", "activeFlag"],
    data() {
        return {};
    },
    methods: {
        close() {
            this.$emit("closeNavItem");
        }
    }
};
</script>

<style scoped lang="scss">
._list-item {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    /*border: 1px solid #E1E1E1;*/
    cursor: pointer;
    &:hover {
        ._closeItem {
            display: block;
        }
    }
    ._closeItem {
        display: none;
        position: absolute;
        right: -10px;
        top: -10px;
        height: 20px;
        width: 20px;
        background-color: #999;
        text-align: center;
        line-height: 20px;
        border-radius: 50%;
        color: #fff;
        font-size: 14px;
        cursor: pointer;
        z-index: 100;
    }
    ._handleElement {
        position: absolute;
        height: 30px;
        width: 30px;
        background: url(../../../../../assets/images/element/move.png) no-repeat
            center center;
        z-index: 8;
        right: 0;
        bottom: 0;
        cursor: move;
    }
}

.content-form-navList-item {
    display: flex;
    height: 180px;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 15px;
    background-color: #ffffff;
    border: 1px dashed #e5e5e5;
    margin-bottom: 20px;
    .content-form-navList-itemImg {
        position: relative;
        height: 80px;
        width: 80px;
        box-sizing: border-box;
        background-color: #ffffff;
        border: 1px solid #e1e1e1;
        &::before {
            content: "+";
            position: absolute;
            top: 50%;
            margin-top: -30px;
            left: 50%;
            margin-left: -20px;
            height: 40px;
            width: 40px;
            text-align: center;
            line-height: 40px;
            font-size: 47px;
            color: #3399ff;
        }
        img {
            height: 78px;
            width: 78px;
            box-sizing: border-box;
            z-index: 10;
            position: absolute;
            left: 0;
            top: 0;
        }
        .content-form-navList-itemText {
            display: inline-block;
            width: 100%;
            font-size: 12px;
            color: #3399ff;
            text-align: center;
            margin-top: 50px;
        }
        .content-form-navList-changeImg {
            position: absolute;
            height: 24px;
            width: 100%;
            text-align: center;
            line-height: 24px;
            background-color: rgba(0, 0, 0, 0.4);
            bottom: 0;
            color: #ffffff;
            z-index: 100;
        }
    }
    .content-form-navList-form {
        flex: 1;
        .navList-form-item {
            margin-bottom: 20px;
            label {
                display: inline-block;
                width: 80px;
                font-size: 14px;
                color: #666666;
                text-align: right;
            }
            .showName {
                position: relative;
                display: inline-block;
                margin-right: 10px;
                .sourceContentDeatils-groupName-close {
                    position: absolute;
                    height: 14px;
                    width: 14px;
                    border-radius: 12px;
                    right: -8px;
                    top: -8px;
                    background-color: #cccccc;
                    text-align: center;
                    line-height: 14px;
                    font-size: 12px;
                    color: #333;
                }
            }
            .sourceContentDeatils-groupName {
                display: inline-block;
                /*a{
						position: relative;
						display: inline-block;
						.sourceContentDeatils-groupName-item{
							display: inline-block;
							border:1px solid rgba(51, 136, 255,.34);
						    color: rgb(102, 102, 102);
						    background: rgb(226, 243, 255);
						    padding: 0 15px 0 5px;
						    height: 26px;
						    line-height: 24px;
						    border-radius: 5px;
						}
						.sourceContentDeatils-groupName-close{
							position: absolute;
							height: 14px;
							width: 14px;
							line-height: 14px;
							font-size: 20px;
							right: 0;
							top: 6px;
						}
						
					}*/
                /*.sourceContentDeatils-groupName-change{
						display: inline-block;
						font-size: 14px;
						color: #3399FF;
						cursor: pointer;
						margin-left: 5px;
					}*/
            }
        }
    }
}

.active {
    border: 1px dashed #3399ff;
}
.el-upload--picture-card {
    height: 80px;
    width: 80px;
}
</style>